<template>
  <div>
    <div class="container">
<!--      <m-chat-->
<!--        ref="mChat"-->
<!--        :messages="messages"-->
<!--        @submit="submit"-->
<!--        :loadMore="loadMore"-->
<!--        height="100px"-->
<!--        style="width: 100px"-->
<!--      >-->
<!--      </m-chat>-->
      <!--music：当前播放的音乐。 list：播放列表 ：showlrc：是否显示歌词-->
<!--      <template>-->
<!--        <aplayer :music="audio[0]" :list="audio"  :showlrc="false" float :listFolded="true" style="width: 100%" v-if="audio.length"/>-->
<!--      </template>-->
      <div class="text-center">
        <div class="center">
          <Avatar size="300" home="true" :src="homeInfo.userPhotoUrl"/>
        </div>
        <h1>{{ homeInfo.userName }}</h1>
        <h4 style="color: #666666;">访问量:{{ homeInfo.pageViewCount }}</h4>
        <p style="white-space: pre-wrap;font-family: 'Tempus Sans ITC'" v-html="homeInfo.blogIntroduction"></p>
      </div>
      <h2>Latest Posts</h2>
      <hr/>
      <div class="grid-3_xs-1_sm-2_md-2" v-if="postsList.length">
        <div
          :key="index"
          v-for="(post, index) in postsList"
          class="col"
        >
          <PostCard :post="post" class="center" style="display: contents"/>
        </div>
      </div>
      <Nothing v-else />
    </div>
  </div>
</template>

<script>
import Avatar from '@/components/Avatar.vue'
import PostCard from '@/components/PostCard.vue'
import Nothing from '@/components/Nothing.vue'
import axios from 'axios'
import Cookies from 'js-cookie'
// import aplayer from 'vue-aplayer'
export default {
  name: 'Home',
  components: {
    Avatar,
    PostCard,
    Nothing
    // aplayer
  },
  data: function () {
    return {
      active: false,
      posts: this.getConfig('posts.json').posts,
      config: this.getConfig().config,
      homeInfo: {},
      postsList: [],
      audio: []
    }
  },
  beforeCreate: function () {
    console.log('---' + sessionStorage)
    const s = localStorage.getItem('openFlag')
    console.log('------' + s)
    if (s === null || s === undefined) {
      this.$vs.notification({
        progress: 'auto',
        position: 'top-left',
        color: 'success',
        title: '护眼模式',
        width: '10%',
        text: '建议开启右上角的夜间模式护眼哦~~~~'
      })
    }
    localStorage.setItem('openFlag', true)
  },
  created () {
    this.changeTitle('Home')
    this.getHomeInfo()
    this.getPostsListInfo()
    this.getMusicListInfo()
  },
  methods: {
    getHomeInfo: function () {
      axios({
        url: '/api/blog/homeInfo/load/1',
        method: 'post'
      }).then(async (res) => {
        this.homeInfo = res.data.data
        Cookies.set('homeInfo', this.homeInfo)
        // console.log(this.homeInfo)
      })
    },
    getPostsListInfo: function () {
      axios({
        url: '/api/blog/postsInfo/pageList',
        method: 'post',
        data: {}
      }).then(async (res) => {
        this.postsList = res.data.data
      })
    },
    getMusicListInfo: function () {
      axios({
        url: '/api/blog/musicInfo/list',
        method: 'post',
        data: {}
      }).then(async (res) => {
        this.audio = res.data.data
      })
    }
  }
}
</script>
<style scoped>
.vs-dialog {
  background: rgba(var(--vs-background), 1);
  color: rgba(var(--vs-text), 1);
  position: relative;
  min-width: 400px;
  border-radius: var(--vs-radius);
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  -webkit-box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
  box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, var(--vs-shadow-opacity));
  max-width: 1500px;
  margin: auto;
}
</style>
